import { useState } from 'react'
import Demo1 from "./components/Demo1";

// MyButton组件
function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>
}


// CleanButton组件
function CleanButton({ clearClick }) {
  return <button onClick={clearClick}>count变为0</button>
}

function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1)
  }

  function handleClickClear(){
    setCount(0);
  }

  return (
    <>
      <h1 style={{ background: 'red' }}>Welcome to my app</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <CleanButton  clearClick={handleClickClear} />
      <Demo1/>
    </>
  )
}

export default App

